import React, { memo, useEffect } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import { getTopBannerAction } from '../store/actionCreators';

//使用hooks
function HYRecommend(props) {
  //组件和redux关联
  //shallowEqual浅层比较，性能优化
  const { topBanners } = useSelector(
    (state) => ({
      topBanners: state.getIn(['recommend', 'topBanners']),
    }),
    shallowEqual,
  );
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getTopBannerAction());
  }, [dispatch]);

  return <div>HYRecommend:{topBanners.length}</div>;
}
export default memo(HYRecommend);
